<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({ name: 'Search' })">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <!-- 这里获取id 才能跳转 -->
      <div class="user" @click="$router.push({ path: `/personal/${id}` })">
        <van-icon name="manager-o" />
      </div>
    </div>
    <!-- 我们就要制作滑动导航页 -->
    <!-- 有两部分，我们把属性写在 tabs里面 -->
    <van-tabs v-model="active" sticky swipeable>
      <van-tab
        v-for="(item, index) in categroyList"
        :key="index"
        :title="item.name"
      >
        <!-- 这里我们需要一个下拉刷新的列表,我们先做单个链表展示  ，需要循环，而且还有传入postList数组数据给组件-->
        <!-- 这里loading ，finished的值我们村在了数组里面，可以使用item.取 -->
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <mypostlist
            v-for="(v, index) in item.postList"
            :key="index"
            :postList="v"
          ></mypostlist>
        </van-list>
        <!-- item.postList 为栏目列表的数据 -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 引入axios请求
import { getpostlist } from "@/apis/article";
import { categroyList } from "../apis/category";
import mypostlist from "@/components/mypostlist";
export default {
  components: {
    mypostlist,
  },
  // 第一步，我们先获取id数据，再创建导航列表
  data() {
    return {
      id: "",
      categroyList: [],
      //默认的显示导航页面，相当于下标，有token的时候，默认为1，没有token的时候默认为2
      active: window.localStorage.getItem("toutiao_token") ? 1 : 0,
    };
  },
  watch: {
    active() {
      if (this.categroyList[this.active].postList.length == 0) {
        // 执行初始函数
        this.init();
      }
    },
  },
  methods: {
    // 封装函数 init
    async init() {
      let result = await getpostlist({
        // 这里我们并不知道是哪一个栏目在显示，但是我们知道tabs里面有一个值active 可以作为下标
        category: this.categroyList[this.active].id,
        pageIndex: this.categroyList[this.active].pageIndex,
        pageSize: this.categroyList[this.active].pageSize,
        // 没一个栏目都有不一样的 刷新也不一样，所以，我还有改造数组 添加变量
        // loading: false,
        // finished: false,
      });
      this.categroyList[this.active].postList.push(...result.data.data);
      this.categroyList[this.active].loading = false;
      if (result.data.data.length < this.categroyList[this.active].pageSize) {
        this.categroyList[this.active].finished = true;
      }
    },
    async onLoad() {
      // 触发onload事件，我们还是需要把页码改变，发送请求，还有把新的数据加到postList里面
      this.categroyList[this.active].pageIndex++;
      setTimeout(
        // async () => {
        //   let result = await getpostlist({
        //     // 这里我们并不知道是哪一个栏目在显示，但是我们知道tabs里面有一个值active 可以作为下标
        //     category: this.categroyList[this.active].id,
        //     pageIndex: this.categroyList[this.active].pageIndex,
        //     pageSize: this.categroyList[this.active].pageSize,
        //     // 没一个栏目都有不一样的 刷新也不一样，所以，我还有改造数组 添加变量
        //     loading: false,
        //     finished: false,
        //   });
        //   this.categroyList[this.active].postList.push(...result.data.data);
        //   //再把loading设置为fales
        //   this.categroyList[this.active].loading = false;
        //   //  再判断如果回来的数据小于pageSize的值，我们把finished改成true
        //   if (
        //     result.data.data.length < this.categroyList[this.active].pageSize
        //   ) {
        //     this.categroyList[this.active].finished = true;
        //   }
        // },
        this.init,
        2000
      );
    },
  },
  async mounted() {
    //页面一开就获取本地存储
    if ((JSON.parse(window.localStorage.getItem("toutiao_user")) || {}).id) {
      this.id = (
        JSON.parse(window.localStorage.getItem("toutiao_user")) || {}
      ).id;
    }
    //   然后我们需要获取，导航列表的数据
    let res = await categroyList();
    // console.log(res);
    // 获取到每一个栏目名，和id ，用一个data的数组接收
    this.categroyList = res.data.data;
    // console.log(this.categroyList);

    // 因为每个栏目的数据都不相同所以，我们只能把每一个数据存到栏目中==数组categroyList中，不会干扰到其他数据，利用active作为下标访问
    // 我这就需要改造数据，我们先要
    this.categroyList = this.categroyList.map((item) => {
      return {
        ...item,
        //之后的栏目数据都能存到这里面
        postList: [],
        // pageIndex  当前页码
        pageIndex: 1,
        // pageSize:显示多少条
        pageSize: 5,
        loading: false, //  存到数组，不存data
        finished: false, //  存到数组，不存data
      };
    });
    this.init();
    // console.log(this.categroyList);
    // 之后又我们需要获取每一个栏目的数据
    // let result = await getpostlist({
    //   // 这里我们并不知道是哪一个栏目在显示，但是我们知道tabs里面有一个值active 可以作为下标
    //   category: this.categroyList[this.active].id,
    //   pageIndex: this.categroyList[this.active].pageIndex,
    //   pageSize: this.categroyList[this.active].pageSize,
    //   // 没一个栏目都有不一样的 刷新也不一样，所以，我还有改造数组 添加变量
    //   loading: false,
    //   finished: false,
    // });
    // // console.log(result); //把获取到的数据添加到我们之前this.categroyList[this.active].postList 里面
    // this.categroyList[this.active].postList.push(...result.data.data);

    // console.log(this.categroyList); //这样我们每一个数组里面都有每一个栏目的数据
  },
};
</script>

<style lang="less" scoped>
.index {
  // height: 3000px;
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }
  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
}
</style>